<template>
	<div class="forget">
		<div class="forget-input pl30rem pr30rem">
			<div class="input_com border-b flex flex-start">
				<span class="fs28rem c333 bold">手机号</span>:
				<input v-model="form.phone" type="text" placeholder="请输入你的手机号" class="ml20 fs28rem c999" >
			</div>
			<div class="input_com border-b flex flex-start layout">
				<div class="flex_1 flex">
					<span class="fs28rem c333 bold">验证码</span>:
					<input v-model="form.captcha" class="ml20 coptcha-input fs28rem c999"  placeholder="请输入验证码" maxlength="6" type="number">
				</div>
				<button class="coptcha red pl20rem pr20rem pt10rem pb10rem fs26rem" @click="getCaptchFun">
					<template v-if="sending">{{ minute }} s</template>
					<template v-else>获取验证码</template>
				</button>
			</div>
			<div class="input_com border-b flex flex-start">
				<span class="fs28rem c333 bold">密码</span>:
				<input   v-model="form.passward" placeholder="请输入密码" type="password"  class="ml20 fs28rem c999">
			</div>
			<button class="btn-button pt10 pb10" :class="{on : boolean}" @click="submit">确定</button>
        </div>
	</div>
</template>

<script>
	import { forgetGetCaptcha, bandingMobile } from "@/api/login";

	export default{
		data()
		{
			return{
				sending         : false,
                minute          : 60,
                verify         	: false,
                form: {
					uid      : window.localStorage.getItem('uid'),
					phone    : '',
					passward : '',	
					captcha  : '',
                },
			}
		},
		computed:
		{
			boolean()
			{
				this.verify = false;
				
 				if(!this.form.phone || !this.form.passward || !this.form.captcha)
					this.verify = false;
				else
					this.verify = true;

				return this.verify;
			}
		},
		methods:
		{
			getCaptchFun () { 

				if(this.sending) 
					return;

				forgetGetCaptcha(this.form.phone, 1).then( res => {	
					this.countDown();
				});				
			},
			submit(){ 
				if(!this.verify)
					return;

				bandingMobile(this.form).then( res => {
					this.$store.dispatch("logout");
					
					this.$store.dispatch("login", res.data[0]);

					
    				this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect: '/');  
				});
			},
			countDown(){
				this.sending = true;

				var clear = setInterval( () => {
					if( this.minute > 0 ){
						--this.minute;
					}else{
						clearInterval(clear);
						this.sending = false;
						this.minute = 60;
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="less">
	.forget{
		.forget-input{
			.input_com {
				height: 120/28rem;
				line-height: 120/28rem;
				::-webkit-input-placeholder {
					color:#999;
				}
				span{
					width: 5rem;
					display: block;
					-moz-text-align-last:justify;
					text-align-last:justify;
				}
				span:after {
					content:'';
				    width: 100%;
				    overflow: hidden;
				    height: 0;
				}
				.coptcha{
					border: 2/28rem solid #ff0036;
					border-radius: 10/28rem;
				}
				.coptcha-input{
					width: 200/28rem;
				}
			}
			.btn-button{
				display: block;
				width: 90%;
				margin: 0 auto;
				margin-top: 80/28rem;
				background-color: #ff7f9a;	
				color: rgba(255,255,255,.5);
				border-radius: 8px;
				font-size: 1rem;
			}
			.on{
				background-color:#ff0036;
				color: white;
			}
		}
	}
</style>